details
  display: block
  padding: $gap
  margin: $gap-block 0
  overflow: hidden
  border-radius: $border-codeblock
  border: 1px solid darken($color-block, 4)
  trans()
  summary
    cursor: pointer
    background: $color-block
    padding: $gap
    margin: 0 - $gap
    color: alpha($color-p, .7)
    font-size: $fontsize-meta
    font-weight: bold
    >
      p,h1,h2,h3,h4,h5,h6
        display: inline
        border-bottom: none !important
    &:hover
      color: $color-p
      &:after
        float: right
        content: '+'
  div.content
    margin-top: $gap-block
    margin-bottom: unit($gap-block, px) - unit($gap, px)
  &[blue]
    border: 1px solid darken(bgcolor($color-md-blue), 4)
    >summary
      background: bgcolor($color-md-blue)
  &[cyan]
    border: 1px solid darken(bgcolor($color-mac-cyan), 4)
    >summary
      background: bgcolor($color-mac-cyan)
  &[green]
    border: 1px solid darken(bgcolor($color-mac-green), 4)
    >summary
      background: bgcolor($color-mac-green)
  &[yellow]
    border: 1px solid darken(bgcolor($color-mac-yellow), 4)
    >summary
      background: bgcolor($color-mac-yellow)
  &[red]
    border: 1px solid darken(bgcolor($color-mac-red), 4)
    >summary
      background: bgcolor($color-mac-red)

details[open]
  border: 1px solid darken($color-block, 8)
  >summary
    border-bottom: 1px solid darken(bgcolor($color-block), 8)
  &[blue]
    border: 1px solid darken(bgcolor($color-md-blue), 8)
    >summary
      border-bottom: 1px solid darken(bgcolor($color-md-blue), 8)
  &[cyan]
    border: 1px solid darken(bgcolor($color-mac-cyan), 8)
    >summary
      border-bottom: 1px solid darken(bgcolor($color-mac-cyan), 8)
  &[green]
    border: 1px solid darken(bgcolor($color-mac-green), 8)
    >summary
      border-bottom: 1px solid darken(bgcolor($color-mac-green), 8)
  &[yellow]
    border: 1px solid darken(bgcolor($color-mac-yellow), 8)
    >summary
      border-bottom: 1px solid darken(bgcolor($color-mac-yellow), 8)
  &[red]
    border: 1px solid darken(bgcolor($color-mac-red), 8)
    >summary
      border-bottom: 1px solid darken(bgcolor($color-mac-red), 8)
  >summary
    color: $color-p
    margin-bottom: $gap-block
    &:hover
      &:after
        content: '-'
  >
    p,.tabs,ul,ol
      margin-top: $gap-p
      margin-bottom: $gap-p
